<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { sensorIcon } from '@/enum/icon';
import { useProjectStore } from '@/store/modules/project';
import { getImg, getProjectLinkListApi } from '@/service/api/businessApi';
import { SimpleScrollbar } from '~/packages/materials';
const projectStore = useProjectStore();
const projectId = projectStore.currentProject?.id;

//
const getIconPath = code => {
  if (sensorIcon.hasOwnProperty(code)) {
    return sensorIcon[code];
  }
  return '/src/assets/imgs/ty@2x.png';
};

onMounted(() => {
  getProjectLinkList();
});

/* 外链模块 */
const linkList = ref([]);
const getProjectLinkList = () => {
  getProjectLinkListApi({
    pageNo: 1,
    pageSize: 1000,
    projectId
  }).then((res: any) => {
    if (res.data) {
      linkList.value = res.data.data;
    }
  });
};

const getImgPreview = async (fileName: any, index: number) => {
  const imgRes: any = await getImg({
    fileName
  });
  const reader = new FileReader();
  reader.onload = async (e: any) => {
    const dom: any = document.getElementById(`img${index}`);
    if (dom) {
      dom.src = e.target.result;
    }
  };
  reader.readAsDataURL(imgRes.data);
  return '';
};
const open = (url: string) => {
  let newUrl = url;
  // 如果 URL 不以 http:// 或 https:// 开头，则补上 https://
  if (!url.startsWith('http://') && !url.startsWith('https://')) {
    newUrl = `https://${url}`;
  }

  const element = document.createElement('a');
  element.href = newUrl;
  element.target = '_blank';
  element.click();
};
/* 外链模块 */
</script>

<template>
  <div class="Card">
    <div class="card-header">
      <img src="../../../assets/imgs/breedAquatics/title_ljrk@2x.png" alt="" />
    </div>
    <div class="card-warp">
      <SimpleScrollbar class="scroll" :step="0.2" hover="true">
        <div class="warp">
          <template v-for="(item, index) in linkList" :key="index">
            <div class="warp-item" style="cursor: pointer" @click="open(item.url)">
              <img v-if="!item.picName" src="@/assets/imgs/link.png" alt="">
              <img v-else :id="`img${index}`" :src="getImgPreview(item.picName, index)" alt="" />
              <div class="text-content">
                <span :title="item.name">{{ item.name }}</span>
              </div>
            </div>
          </template>
        </div>
      </SimpleScrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Card {
  width: 450px;
  height: 493px;
  background-image: url('@/assets/imgs/breedAquatics/img_bto.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

  .card-header {
    width: 165px;
    height: 50px;
    padding-top: 25px;
    margin-left: 20px;
  }

  .card-warp {
    flex: 1;
    max-height: 410px;
    .warp {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 10px 20px;
      padding: 20px 30px 0 30px;
      &-item {
        display: flex;
        background: rgba(10, 94, 182, 0.4);
        border-radius: 12px;
        padding: 12px 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(6px);
        color: white;
        img {
          width: 60px;
          height: 60px;
        }
        .text-content {
          display: flex;
          justify-content: center;
          flex-direction: column;
          margin-left: 14px;
          flex: 1;
          min-width: 0;
          overflow: hidden;
          span {
            font-weight: 400;
            font-size: 14px;
            color: #8dd8f2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
          }
        }
      }
    }
  }
}
</style>
